<template>
  <div class="app-container">
    <!-- 右侧表格 -->

    <!-- 顶部信息展示 -->
    <div class="top-info">
      <div class="info-row">
        <span class="label">培训班编号：</span>
        <span class="value">{{ trainingClassCode }}</span>
        <span class="label">培训班名称：</span>
        <span class="value">{{ trainingClassName }}</span>
        <span class="label">姓名：</span>
        <span class="value">{{ studentName }}</span>
        <span class="label">证件编号：</span>
        <span class="value">{{ idNumber }}</span>
      </div>
    </div>
    <!-- 搜索表单 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
      :gutter="10"
    >
      <el-row :gutter="20">
        <!-- 是否通过 -->
        <el-col :span="6">
          <el-form-item label="是否通过" prop="examResult">
            <el-select
              v-model="queryParams.examResult"
              placeholder="选择是否通过"
              clearable
            >
              <el-option
                v-for="dict in dict.type.exam_result"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 考试状态 -->
        <el-col :span="6">
          <el-form-item label="考试状态" prop="examStatus">
            <el-select
              v-model="queryParams.examStatus"
              placeholder="选择考试状态"
              clearable
            >
              <el-option
                v-for="dict in dict.type.exam_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 操作按钮 -->
        <el-col :span="12">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <!-- 左侧按钮 -->
          <div style="display: flex; gap: 10px">
            <el-button type="warning" plain @click="handleExport"
              >导出</el-button
            >
            <el-button type="info" plain @click="handleRemark"
              >学员备注</el-button
            >
            <el-button type="success" plain @click="handleNotice"
              >学员通知</el-button
            >
            <el-button type="primary" plain @click="handleMakeUp"
              >多次补考</el-button
            >
            <el-button type="danger" plain @click="handleExamDetail"
              >考题详情</el-button
            >
            <!-- <el-button type="warning" plain @click="handleGenerateCertificate"
                >生成电子证书</el-button
              > -->
          </div>

          <!-- 右侧按钮 -->
          <div style="display: flex; justify-content: flex-end; gap: 10px">
            <column-config-dialog-vue
              :showSearch.sync="showSearch"
              :columns="tableColumns"
              @queryTable="getList"
            ></column-config-dialog-vue>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="examRecordList"
      @selection-change="handleSelectionChange"
      border
    >
      <!-- 选择列 -->
      <el-table-column type="selection" width="55" align="center" />

      <!-- 编号 -->
      <el-table-column
        label="编号"
        align="center"
        prop="examRecordId"
        v-if="tableColumns.find((col) => col.key === 'examRecordId').visible"
        width="80"
      />

      <!-- 姓名 -->
      <el-table-column
        label="姓名"
        align="center"
        prop="studentName"
        v-if="tableColumns.find((col) => col.key === 'studentName').visible"
        width="80"
      />

      <!-- 证件编号 -->
      <el-table-column
        label="证件编号"
        align="center"
        prop="idNumber"
        v-if="tableColumns.find((col) => col.key === 'idNumber').visible"
        width="120"
      />

      <!-- 性别 -->
      <el-table-column
        label="性别"
        align="center"
        prop="sex"
        v-if="tableColumns.find((col) => col.key === 'sex').visible"
        width="60"
      />

      <!-- 电话 -->
      <el-table-column
        label="电话"
        align="center"
        prop="phonenumber"
        v-if="tableColumns.find((col) => col.key === 'phonenumber').visible"
        width="120"
      />

      <!-- 单位名称 -->
      <el-table-column
        label="单位名称"
        align="center"
        prop="unitName"
        v-if="tableColumns.find((col) => col.key === 'unitName').visible"
        width="120"
      />

      <!-- 考试安排开始时间 -->
      <el-table-column
        label="考试开始时间"
        align="center"
        prop="examStartTime"
        v-if="tableColumns.find((col) => col.key === 'examStartTime').visible"
        width="140"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.examStartTime, "{y}-{m}-{d} {h}:{i}")
          }}</span>
        </template>
      </el-table-column>

      <!-- 时长 -->
      <el-table-column
        label="考试时长"
        align="center"
        prop="actualDuration"
        v-if="tableColumns.find((col) => col.key === 'actualDuration').visible"
        width="80"
      />

      <!-- 考试途径 -->
      <el-table-column
        label="考试途径"
        align="center"
        prop="examPathway"
        v-if="tableColumns.find((col) => col.key === 'examPathway').visible"
        width="80"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.exam_pathway"
            :value="scope.row.examPathway"
          />
        </template>
      </el-table-column>

      <!-- 考试成绩--理论成绩 -->
      <el-table-column
        label="考试成绩"
        align="center"
        prop="theoryResult"
        v-if="tableColumns.find((col) => col.key === 'theoryResult').visible"
        width="80"
      />

      <!-- 是否通过 -->
      <el-table-column
        label="是否通过"
        align="center"
        prop="examResult"
        v-if="tableColumns.find((col) => col.key === 'examResult').visible"
        width="80"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.examResult === '1'" class="text-green"
            >通过</span
          >
          <span v-else class="text-red">未通过</span>
        </template>
      </el-table-column>

      <!-- 考试状态 -->
      <el-table-column
        label="考试状态"
        align="center"
        prop="examStatus"
        v-if="tableColumns.find((col) => col.key === 'examStatus').visible"
        width="100"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.exam_status"
            :value="scope.row.examStatus"
          />
        </template>
      </el-table-column>

      <!-- 补考情况 -->
      <el-table-column
        label="补考情况"
        align="center"
        prop="makeUpStatus"
        v-if="tableColumns.find((col) => col.key === 'makeUpStatus').visible"
        width="100"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.make_up_status"
            :value="scope.row.makeUpStatus"
          />
        </template>
      </el-table-column>

      <!-- 补考标记 -->
      <el-table-column
        label="补考标记"
        align="center"
        prop="makeUpMark"
        v-if="tableColumns.find((col) => col.key === 'makeUpMark').visible"
        width="100"
      />

      <!-- 备注 -->
      <el-table-column
        label="备注"
        align="center"
        prop="examRecordRemark"
        v-if="
          tableColumns.find((col) => col.key === 'examRecordRemark').visible
        "
        width="120"
      />

      <!-- 操作 -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        v-if="tableColumns.find((col) => col.key === 'operation').visible"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleExamDetail(scope.row)"
          >
            考试详情
          </el-button>
          <el-button size="mini" type="text" @click="handleRemark(scope.row)">
            备注
          </el-button>
          <el-button size="mini" type="text" @click="handleNotice(scope.row)">
            学员通知
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改考试记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="试卷id" prop="examPaperId">
          <el-input v-model="form.examPaperId" placeholder="请输入试卷id" />
        </el-form-item>
        <el-form-item label="考生用户ID" prop="studentId">
          <el-input v-model="form.studentId" placeholder="请输入考生用户ID" />
        </el-form-item>
        <el-form-item label="考试编号" prop="examNumber">
          <el-input v-model="form.examNumber" placeholder="请输入考试编号" />
        </el-form-item>
        <el-form-item label="考试开始时间" prop="examStartTime">
          <el-date-picker
            clearable
            v-model="form.examStartTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择考试开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试结束时间" prop="examEndTime">
          <el-date-picker
            clearable
            v-model="form.examEndTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择考试结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际考试时长(分钟)" prop="actualDuration">
          <el-input
            v-model="form.actualDuration"
            placeholder="请输入实际考试时长(分钟)"
          />
        </el-form-item>
        <el-form-item label="考试总分" prop="totalScore">
          <el-input v-model="form.totalScore" placeholder="请输入考试总分" />
        </el-form-item>
        <el-form-item label="理论成绩" prop="theoryResult">
          <el-select v-model="form.theoryResult" placeholder="请选择理论成绩">
            <el-option
              v-for="dict in dict.type.exam_result"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实操成绩" prop="practicalResult">
          <el-select
            v-model="form.practicalResult"
            placeholder="请选择实操成绩"
          >
            <el-option
              v-for="dict in dict.type.exam_result"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补考成绩" prop="makeUpResult">
          <el-select v-model="form.makeUpResult" placeholder="请选择补考成绩">
            <el-option
              v-for="dict in dict.type.exam_result"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试结果" prop="examResult">
          <el-select v-model="form.examResult" placeholder="请选择考试结果">
            <el-option
              v-for="dict in dict.type.exam_result"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补考标记" prop="makeUpMark">
          <el-input v-model="form.makeUpMark" placeholder="请输入补考标记" />
        </el-form-item>
        <el-form-item label="补考情况" prop="makeUpStatus">
          <el-select v-model="form.makeUpStatus" placeholder="请选择补考情况">
            <el-option
              v-for="dict in dict.type.make_up_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否可二次考试申报" prop="isSecondExam">
          <el-select
            v-model="form.isSecondExam"
            placeholder="请选择是否可二次考试申报"
          >
            <el-option
              v-for="dict in dict.type.is_second_exam"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试状态" prop="examStatus">
          <el-select v-model="form.examStatus" placeholder="请选择考试状态">
            <el-option
              v-for="dict in dict.type.exam_result"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交类型" prop="submitType">
          <el-input v-model="form.submitType" placeholder="请输入提交类型" />
        </el-form-item>
        <el-form-item label="考试终端IP地址" prop="examIp">
          <el-input v-model="form.examIp" placeholder="请输入考试终端IP地址" />
        </el-form-item>
        <el-form-item label="考试终端坐标" prop="examCoordinates">
          <el-input
            v-model="form.examCoordinates"
            placeholder="请输入考试终端坐标"
          />
        </el-form-item>
        <el-form-item label="设备信息" prop="deviceInfo">
          <el-input v-model="form.deviceInfo" placeholder="请输入设备信息" />
        </el-form-item>
        <el-form-item label="备注" prop="examRecordRemark">
          <el-input v-model="form.examRecordRemark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="是否删除" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入是否删除" />
        </el-form-item>
        <el-form-item label="${comment}" prop="exampleOne">
          <el-input v-model="form.exampleOne" placeholder="请输入${comment}" />
        </el-form-item>
        <el-form-item label="${comment}" prop="exampleTwo">
          <el-input v-model="form.exampleTwo" placeholder="请输入${comment}" />
        </el-form-item>
        <el-form-item label="${comment}" prop="exampleThree">
          <el-input
            v-model="form.exampleThree"
            placeholder="请输入${comment}"
          />
        </el-form-item>
        <el-form-item label="${comment}" prop="exampleFour">
          <el-input v-model="form.exampleFour" placeholder="请输入${comment}" />
        </el-form-item>
        <el-form-item label="${comment}" prop="exampleFive">
          <el-input v-model="form.exampleFive" placeholder="请输入${comment}" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listExamRecord,
  getExamRecord,
  delExamRecord,
  addExamRecord,
  updateExamRecord,
  getExamList,
} from "@/api/examination/examRecord";

import ColumnConfigDialogVue from "../../../components/ColumnConfig/ColumnConfigDialog.vue";

export default {
  name: "ExamRecord",
  components: {
    ColumnConfigDialogVue,
  },

  dicts: [
    "make_up_status", //补考情况
    "is_second_exam",
    "training_type", //培训类型
    "exam_result", //是否通过
    "exam_status", //考试状态
    "make_up_mark", //补考标记
    "is_second_exam", //是否可二次考试申报
    // "", //电子证书标记
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 考试记录表格数据
      examRecordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        examNumber: null,
        examStartTime: null,
        examEndTime: null,
        theoryResult: null,
        practicalResult: null,
        makeUpResult: null,
        examResult: null,
        makeUpMark: null,
        makeUpStatus: null,
        isSecondExam: null,
        examStatus: null,

        studentName: null,
        idNumber: null,
        trainingType: null,
        phonenumber: null,
        unitName: null,
        examTime: null,
        examEecordRemark: null,
        trainingClass: null,
        electronicCertificate: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},

      //新增数据定义

      // 列配置弹窗
      tableColumns: [
        { key: "examRecordId", label: "编号", visible: true },
        { key: "studentName", label: "姓名", visible: true },
        { key: "idNumber", label: "证件编号", visible: true },
        { key: "sex", label: "性别", visible: true },
        { key: "phonenumber", label: "电话", visible: true },
        { key: "unitName", label: "单位名称", visible: true },
        { key: "examStartTime", label: "考试时间", visible: true },
        { key: "actualDuration", label: "考试时长", visible: true },
        { key: "examPathway", label: "考试途径", visible: true },
        { key: "examStatus", label: "考试状态", visible: true },
        { key: "theoryResult", label: "考试成绩", visible: true },
        { key: "examResult", label: "是否通过", visible: true },
        { key: "makeUpStatus", label: "补考情况", visible: true },
        { key: "makeUpMark", label: "补考标记", visible: true },
        { key: "examRecordRemark", label: "备注", visible: true },
        { key: "operation", label: "操作", visible: true },
      ],
      //top info

      trainingClassCode: "",
      trainingClassName: "",
      studentName: "",
      idNumber: "",
    };
  },
  created() {
    this.getList();

    // this.fetchUserInfo(); // 获取学员信息
  },
  methods: {
    // async fetchUserInfo() {
    //   try {
    //     const response = await getUserInfo(); // 假设有一个 API 获取当前登录用户信息
    //     const { trainingClassCode, trainingClassName, studentName, idNumber } =
    //       response.data;
    //     this.trainingClassCode = trainingClassCode;
    //     this.trainingClassName = trainingClassName;
    //     this.studentName = studentName;
    //     this.idNumber = idNumber;
    //   } catch (error) {
    //     console.error("获取用户信息失败:", error);
    //   }
    // },
    /** 查询考试记录列表 */
    getList() {
      this.loading = true;
      const id = this.$store.state.user.id;
      //   var username = this.$store.state.user.name;

      var params = { ...this.queryParams, studentId: id };
      getExamList(params).then((response) => {
        this.examRecordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        examRecordId: null,
        examPaperId: null,
        studentId: null,
        examNumber: null,
        examStartTime: null,
        examEndTime: null,
        actualDuration: null,
        totalScore: null,
        theoryResult: null,
        practicalResult: null,
        makeUpResult: null,
        examResult: null,
        makeUpMark: null,
        makeUpStatus: null,
        isSecondExam: null,
        examStatus: null,
        submitType: null,
        examIp: null,
        examCoordinates: null,
        deviceInfo: null,
        examRecordRemark: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        exampleOne: null,
        exampleTwo: null,
        exampleThree: null,
        exampleFour: null,
        exampleFive: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.examRecordId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加考试记录";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const examRecordId = row.examRecordId || this.ids;
      getExamRecord(examRecordId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改考试记录";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.examRecordId != null) {
            updateExamRecord(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addExamRecord(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const examRecordIds = row.examRecordId || this.ids;
      this.$modal
        .confirm('是否确认删除考试记录编号为"' + examRecordIds + '"的数据项？')
        .then(function () {
          return delExamRecord(examRecordIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "examination/examRecord/export",
        {
          ...this.queryParams,
        },
        `examRecord_${new Date().getTime()}.xlsx`
      );
    },

    //新增方法

    // 示例方法（实际逻辑需根据业务实现）
    handleRemark() {
      this.$message.info("点击了学员备注");
    },
    handleNotice() {
      this.$message.info("点击了学员通知");
    },
    handleMakeUp() {
      this.$message.info("点击了多次补考");
    },
    handleExamDetail() {
      this.$message.info("点击了考试详情");
    },
    handleGenerateCertificate() {
      this.$message.info("点击了生成电子证书");
    },
  },
  watch: {
    examRecordList(newVal) {
      if (newVal.length > 0) {
        const record = newVal[0];
        this.trainingClassCode = record.trainingClassCode;
        this.trainingClassName = record.trainingClassName;
        this.studentName = record.studentName;
        this.idNumber = record.idNumber;
      }
    },
  },
};
</script>
<style scoped>
.top-info {
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 15px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: #666;
}

.info-row .label {
  font-weight: bold;
  min-width: 80px;
}

.info-row .value {
  color: #333;
}
</style>





